/**
 * Created by mapbar_front on 2018/2/25.
 */

import React,{ Component } from 'react';
import { DatePicker } from 'antd';

class DatePick extends Component {
    constructor(props) {
        super(props);
        this.state = {
            startValue: '',
            endValue: '',
            endOpen: false,
        }
    }
    //开始日期
    onStartChange=(value)=>{
        //console.log('开始的时间',value);
        this.onChange('startValue',value);
    }
    //结束日期
    onEndChange=(value)=>{
        this.onChange('endValue',value);
    }
    //更新日期
    onChange(field,value) {
        //console.log('field',field);
        //console.log('value',value);
        this.setState({
            [field]: value
        })
    }
    handleStartOpenChange=(open)=>{
        console.log('start-open',open);
        if(!open) {
            this.setState({
                endOpen: true,
            })
        }
    }
    handleEndOpenChange=(open)=>{
        console.log('end-open',open);
        this.setState({
            endOpen: open,
        })
    }
    //禁止的时间
    disabledStartDate=(startValue)=> {
        console.log('禁止的开始日期：',startValue);
        const endValue = this.state.endValue;
        if(!startValue || !endValue){
            return false;
        }
        return startValue.valueOf > endValue.valueOf();
    }
    disabledEndDate=(endValue)=>{
        console.log('禁止的结束日期：',endValue);
        const startValue = this.state.startValue;
        if(!endValue || !startValue) {
            return false;
        }
        return endValue.valueOf() <= startValue.valueOf();
    }

    render() {
        const { startValue,endValue,endOpen } = this.state;

        return (
            <div>
                <DatePicker
                    //showTime
                    placeholder="请选择开始日期"
                    format="YYYY-MM-DD HH:mm:ss"
                    onChange={ this.onStartChange }
                    value = { startValue }
                    onOpenChange={ this.handleStartOpenChange }
                    disabledDate= { this.disabledStartDate }
                />
                <DatePicker
                    //showTime
                    placeholder="请选择结束日期"
                    format="YYYY-MM-DD HH:mm:ss"
                    onChange={ this.onEndChange }
                    value = { endValue }
                    open ={ endOpen }
                    onOpenChange = { this.handleEndOpenChange }
                    disabledDate= { this.disabledEndDate }
                />
            </div>
        )
    }
}
export default DatePick;
